<template>
	<CustomNavBar :showBack="true" :leftNav="false">
	</CustomNavBar>
	<view class="paes">
		<view class="images">
			<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/login.png" mode="aspectFit" class="imags"></image>
		</view>
		<view class="poos">
			<view class="tops" style="width: 100%;height: 238rpx;"></view>
			<view class="titles">
				Hello!
			</view>
			<view class="titles1">
				欢迎来到 omo 租房
			</view>
			<view class="doms">
				<view class="topsVies">
					<view class="left" @click="switchSlelct(0)">
						<view :class="['lognis','dis',data.indexOf == 0?'select':'']">
							手机登录
						</view>
						<view class="lins" v-if="data.indexOf == 0"></view>
					</view>
					<view class="rigths" @click="switchSlelct(1)">
						<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/loginImg.png" mode="" class="images"></image>
						<view :class="['lognis','dis',data.indexOf == 1?'select':'']">
							微信登录
						</view>
						<view class="lins" v-if="data.indexOf == 1"></view>
					</view>
				</view>
				<block v-if="data.indexOf == 0">
					<view class="contens">
						<input type="text" v-model="data.phoneNumber" placeholder="请输入手机号码" class="full_flex" />
					</view>
					<view class="contens contens1">
						<input type="text" v-model="data.codePone" placeholder="请输入验证码" class="full_flex full_flex1" />
						<view class="tistCode dis" @click="getCode">
							{{data.nums==0?data.code:data.nums}}
						</view>
					</view>
					<view class="botns dis" @click="handleClick" :style="{opacity:surePass?1:0.5}">
						登录
					</view>
				</block>
				<block v-else>
					<view class="constVies dis">
						<button class="mini-btn botns1 dis" v-if="!surePass" @click="handleVerdict"
							:disabled="data.isLogins">一键微信登录</button>
						<button class="mini-btn botns1 dis" open-type="getPhoneNumber"  style="opacity:1"
							@getphonenumber="getPhoneNumberClick" :disabled="data.isLogins" v-else>一键微信登录</button>
						<!-- <button class="mini-btn botns1 dis" open-type="getPhoneNumber" @getuserinfo="handleAuth" :disabled="data.isLogins">登录</button> -->
					</view>
				</block>
				
			</view>
			<view class="footer">
				<view class="imaes" @click="data.select = !data.select">
					<image src="/pagesA/static/noselect.png" mode="aspectFit" class="noSelect" v-if="!data.select">
					</image>
					<image src="/pagesA/static/selectTrue.png" mode="aspectFit" class="noSelect noSelect1" v-else>
					</image>
			
				</view>
				<view class="text">
					我已阅读并同意
				</view>
				<view class="text text1" @click="handleWebView('userProtocol')">
					《用户协议》
				</view>
				<view class="text" style="margin: 0;">
					和
				</view>
				<view class="text text1" @click="handleWebView('privacyPolicy')">
					《隐私政策》
				</view>
			</view>
		</view>
	</view>
	<view class="models dis" v-if="data.showGetPhone">
		<view class="modelsInfo">
			<view class="tops dis">
				提示
			</view>
			<view class="contens3 dis">
				接下来我们将获取您的手机号码
			</view>
			<view class="botnsList dis">
				<view class="lefBton dis" @click="data.showGetPhone = false">
					取消
				</view>
				<view class="lefBton ringthsLins">
					<button type="default" class="btons dis" open-type="getPhoneNumber"
						@getphonenumber="getphonenumber">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import http from '@/uitls/http.js'
	import {
		logins,
		loginApp,
		loginWx
	} from './js/api';
	import {
		validatePhone
	} from '@/uitls/check.js'
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	const surePass = computed(() => {
		let result = false
		if (data.indexOf == 1) {
			if (data.select) result = true
		} else {
			if (data.phoneNumber && data.codePone && data.select) result = true
		}

		return result
	})
	const app = getApp()
	const userInfo = ref({
		userInfo: ''
	})
	const data = reactive({
		indexOf: 0,
		code: '获取验证码',
		phoneNumber: '',
		intervalId: null,
		nums: 0,
		select: false,
		codePone: '',
		showGetPhone: false,
		isLogins: false, //是否登录
	})
	const handleClick = async () => {
		if (!data.phoneNumber || !data.codePone) return http.isMssage('请输入手机号码或验证码')
		if (!data.select) return http.isMssage('请勾选用户协议')
		data.isLogins = true
		try {
			const loginRes = await uni.login({
				provider: 'weixin'
			});
			const res = await loginApp({
				code: data.codePone,
				phone: data.phoneNumber,
				wxCode:loginRes.code
			})
			if (res.data.code != 0) {
				data.isLogins = false
				return http.isMssage(res.data.message)
			}
			data.isLogins = false
			// console.log(res)
			uni.setStorageSync('token', res.data.data)
			app.setIsLogins()
			app.setPhoneNumber(data.phoneNumber)
			uni.reLaunch({
				url: '/pages/home/home',
			})
		} catch (err) {
			data.isLogins = false
		}
	}
	const switchSlelct = (index) => {
		data.indexOf = index
	}
	const getCode = async () => {
		// console.log(data.phoneNumber)
		if (!validatePhone(data.phoneNumber)) return
		const res = await logins({
			phone: data.phoneNumber,

		})
		// const {data} = res;
		if (res.data.code != 0) {
			return http.isMssage(res.data.message)
		}
		data.nums = 60
		const intervalId = setInterval(() => {
			if (data.nums > 1) {
				data.nums--
			} else {
				data.nums = 0
				data.code = '重新获取'
				clearInterval(intervalId)
			}
		}, 1000)


	}
	const handleAuth = async (res) => {
		if (!data.select) return http.isMssage('请勾选用户协议')
		console.log('用户信息:', res);
		if (!res.target.userInfo) return http.isMssage('用户信息获取失败')
		data.showGetPhone = true
		console.log('用户信息:', res);
	}
	const getphonenumber = async (res) => {
		if (res.detail.errMsg !== 'getPhoneNumber:ok') {
			uni.showToast({
				title: '用户拒绝授权',
				icon: 'none'
			});
			return;
		}
		console.log(res, 'djsiojfwiefkdsmisdo ')
		// 1. 先登录获取 code
		const loginRes = await uni.login({
			provider: 'weixin'
		});
		data.showGetPhone = false
		uni.reLaunch({
			url: '/pages/home/home'
		})
	}
	const handleWebView = (type) => {
		uni.navigateTo({
			url: '/pagesA/webView/webView?type=' + type
		})
	}
	const getPhoneNumberClick = async (e) => {

		let code = e.detail.code
		// console.log( e)
		if(!code) return false
		const loginRes = await uni.login({
			provider: 'weixin'
		});
		let res = await loginWx({
			code,
			wxCode:loginRes.code
		})
		if (res.data.code != 0) {
			data.isLogins = false
			return http.isMssage(res.data.message)
		}
		data.isLogins = false
		uni.setStorageSync('token', res.data.data)
		app.setIsLogins()
		// app.setPhoneNumber(data.phoneNumber)
		uni.reLaunch({
			url: '/pages/home/home',
		})
		app.agetInfoData()
	}
	const handleVerdict = ()=>{
		http.isMssage('请勾选用户协议')
	}
	
</script>

<style lang="less" scoped>
	.paes {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom, #FCEEC8 0%, #F6F6F6 100%);

		.images {
			width: 100%;
			height: 750rpx;

			.imags {
				width: 100%;
				height: 750rpx;
			}
		}

		.poos {
			position: fixed;
			top: 0;
			height: 100vh;
			width: 690rpx;
			left: 30rpx;

			// border: 1px solid red;
			.titles {
				font-family: AlimamaShuHeiTi-Bold;
				font-size: 72rpx;
				color: #000000;
				line-height: 90rpx;
				font-weight: 700;
			}

			.titles1 {
				margin-top: 16rpx;
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 400;
			}

			.doms {
				width: 100%;
				// height: 1120rpx;
				height: 520rpx;
				background: #FFFFFF;
				margin-top: 124rpx;
				border-radius: 40rpx;
				padding-bottom: 30rpx;
				// position: relative;
				.topsVies {
					width: 100%;
					height: 88rpx;
					// border: 1px solid red;
					display: flex;

					.left {
						width: 50%;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;

						.lognis {
							width: 100%;
							height: 68rpx;
							font-family: PingFangSC-Regular;
							font-size: 28rpx;
							color: #999999;
							line-height: 30px;
							font-weight: 400;
							// top: 0;
							// border: 1px solid red;
						}

						.select {
							font-family: PingFangSC-Semibold;
							font-size: 28rpx;
							color: #EE7930;
							line-height: 30rpx;
							font-weight: 600;
						}

						.lins {
							position: absolute;
							width: 36rpx;
							height: 4rpx;
							background: #EE7930;
							border-radius: 3rpx;
							top: 68rpx;
						}

					}

					.rigths {
						width: 50%;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;

						.images {
							width: 100%;
							height: 100%;

						}

						.lognis {
							position: absolute;
							width: 100%;
							height: 68rpx;
							font-family: PingFangSC-Regular;
							font-size: 28rpx;
							color: #999999;
							line-height: 30rpx;
							font-weight: 400;
							top: 0;
							// border: 1px solid red;
						}

						.select {
							font-family: PingFangSC-Semibold;
							font-size: 28rpx;
							color: #EE7930;
							line-height: 30rpx;
							font-weight: 600;
						}

						.lins {
							position: absolute;
							width: 36rpx;
							height: 4rpx;
							background: #EE7930;
							border-radius: 3rpx;
							top: 68rpx;
						}
					}
				}

				.contens {
					width: 100%;
					margin: auto;
					margin-top: 40rpx;
					background: #F3F5F9;
					border-radius: 50rpx;
					width: 626rpx;
					height: 100rpx;

					.full_flex {
						width: 586rpx;
						height: 100%;
						margin-left: 40rpx;
					}

					.full_flex1 {
						width: 460rpx;
					}

					.tistCode {
						min-width: 140rpx;
						font-family: PingFangSC-Regular;
						font-size: 28rpx;
						color: #666666;
						text-align: right;
						line-height: 40rpx;
						font-weight: 400;
						margin-right: 40rpx;
						// border: 1px solid red;
						height: 100%;
					}
				}

				.contens1 {
					margin-top: 40rpx;
					display: flex;
					align-items: center;
				}

				.botns {
					margin: auto;
					width: 626rpx;
					height: 90rpx;
					opacity: 0.5;
					background-image: linear-gradient(to left, #F1B13F 0%, #F8D648 100%);
					border-radius: 50rpx;
					margin-top: 50rpx;
					font-family: PingFangSC-Regular;
					font-size: 36rpx;
					color: #FFFFFF;
					text-align: right;
					line-height: 40rpx;
					font-weight: 400;
				}

				.constVies {
					width: 100%;
					height: 400rpx;
					// border: 1px solid red;
					margin-top: 50rpx;
					display: flex;
					align-items: center;

					.botns1 {
						margin: auto;
						width: 626rpx;
						height: 90rpx;
						opacity: 0.5;
						background-image: linear-gradient(to left, #F1B13F 0%, #F8D648 100%);
						border-radius: 50rpx;
						// margin-top: 50rpx;
						font-family: PingFangSC-Regular;
						font-size: 36rpx;
						color: #FFFFFF;
						text-align: right;
						line-height: 40rpx;
						font-weight: 400;
					}
				}

				
			}
			.footer {
				position: absolute;
				bottom: 76rpx;
				width: 100%;
				height: 30rpx;
				// border: 1px solid red;
				display: flex;
				align-items: center;
			
				.imaes {
					width: 28rpx;
					height: 28rpx;
					margin-left: 83rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
			
					.noSelect {
						width: 100%;
						height: 100%;
					}
			
					.noSelect1 {
						position: absolute;
					}
				}
			
				.text {
					margin-left: 16rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #000000;
					line-height: 30rpx;
					font-weight: 400;
				}
			
				.text1 {
					color: #EE7930;
					margin: 0;
				}
			}
		}
	}

	.models {
		position: fixed;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		width: 750rpx;
		height: 100vh;
		z-index: 9999999999999;

		.modelsInfo {
			width: 500rpx;
			height: 300rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.tops {
				width: 100%;
				height: 100rpx;
				font-family: PingFangSC-Semibold;
				font-size: 34rpx;
				color: #000000;
				text-align: center;
				font-weight: 600;
			}

			.contens3 {
				width: 90%;
				height: 120rpx;
				margin: auto;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #666666;
				line-height: 26rpx;
				font-weight: 400;
			}

			.botnsList {
				width: 100%;
				height: 80rpx;

				.lefBton {
					width: 50%;
					height: 100%;
					border-top: 1rpx solid #ccc;
					font-size: 24rpx;
					color: #666666;
				}

				.ringthsLins {
					border-left: 1rpx solid #ccc;

					.btons {
						width: 100%;
						height: 100%;
						background-color: #fff;
						border: none;
						border-radius: 0;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
	}

	button::after {
		border: none;
		/* 去除默认边框 */
		border-radius: 0;
		/* 确保伪元素也没有圆角 */
	}
</style>